import React, { Component } from 'react'
import "./notice.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiBanner , getApiNotice , getApiNoticeTypeList , getApiNoticeInfo } from "../../axios/api"
import { Pagination } from 'antd';
import { get, UrlSearch } from '../../axios/localstorage';

export default class notice extends Component {

    state = {
        currentIndex:0,
        banner:[],
        page:1,
        total:1,
        list:[],
        show:0,
        title:'',
        type:'',
        typeList:[],
        data:{},
        name:"",

        ntitle:"",

    }


    componentWillMount(){
        window.scroll(0,0);

        let id = UrlSearch('id');

        getApiBanner()
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    banner:req.data.data
                })
            }
        }).catch( err =>{
            console.error(err);
        })

            getApiNoticeTypeList({type:2})
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        typeList:data,
                        type:data[0].id,
                        ntitle:data[0].title,
                    })
    
                    setTimeout(()=>{

                        if(id){
                            this.getInfo(id);
                        }else{
                            this.getData(1);
                        }
                        
                    },50)
                }
            }).catch(err =>{
                console.error(err);
            })
        
    }

    componentDidMount(){
        
    }

    gotoSlide=(num)=>{
        this.refs['bslide'].goTo(num);
    }

    gotoUrl=(item)=>{
        console.log(item);
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.setState({
            page
        })
        this.getData(page);
    }

    getData=(page)=>{
        console.log(page);
        let param = {
            page,
            type_id:this.state.type,
            city:get('city'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        this.props.history.push('/notice');

        getApiNotice(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data.list,
                    total:data.total
                })
            }else{
                this.setState({
                    list:[],
                    total:0,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoNext=(id)=>{
        if(id){
            this.getInfo(id);
        }
    }

    getInfo=(id)=>{
        let param = {
            id,
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        }
        
        getApiNoticeInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data.info;
                this.setState({
                    show:1,
                    title:data.title,
                    data
                })

                this.props.history.push('/notice?id='+id);
            }   
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    render() {
        return (
            <div className="notice">
                <Header />
                {/* <img alt="" src="assets/imgs/zhuangshi1.png" className='hp_bg' /> */}
                <div className="main">
                    <div className="cen">
                        <div className="box">
                            <div className="thead">
                                <div>
                                    <img className="img" alt="" src="assets/imgs/dingwei.png" />
                                    <p className="p_point" onClick={()=>{
                                        if(get('type')){
                                            // this.gotoPage('/index')
                                            this.gotoPage('/home')
                                        }else{
                                            this.gotoPage('/home')
                                        }
                                    }}>首页</p>
                                    <img className="icon" alt="" src="assets/img/xiaji.png" />
                                    <p className={this.state.show?"p_point":""} onClick={()=>{this.setState({show:0});this.gotoPage('/notice');this.getData(1)}}>新闻资讯</p>
                                    <img hidden={!this.state.show} alt="" className="icon" src="assets/img/xiaji.png" />
                                    <p hidden={!this.state.show}>{this.state.title}</p>
                                </div>
                            </div>
                            <div className="mbox">
                                <div className="mleft">
                                    <div className="m1">
                                        <img alt="" src="assets/imgs/tongzhizhongxin.png" />
                                        <p>通知中心</p>
                                    </div>
                                    {
                                        this.state.typeList.map((item,index)=>{
                                            return <div key={index} className={this.state.type === item.id?"m2 m_active":"m2"} onClick={()=>{
                                                this.setState({type:item.id,show:0,ntitle:item.title});
                                                setTimeout(()=>{this.getData(1)},50)
                                                }}>
                                                        {/* <img className="mimg" alt="" src="assets/imgs/xinwenzixun-jiantou.png" /> */}
                                                        <p>{item.title}</p>
                                                    </div>
                                        })
                                    }
                                </div>
                                <div className="mright" hidden={this.state.show}>
                                    <div className="list">
                                        <div className="h_title">
                                            <div className="hname">
                                            {this.state.ntitle}
                                                <div className="hcen">
                                                    <span></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="none" hidden={this.state.list.length !== 0}>
                                            <div className="cen">
                                                <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                            </div>
                                            <p>暂无此类新闻</p>
                                        </div>
                                        {
                                            this.state.list.map((item,index)=>{
                                                return <div className="item" key={index} onClick={()=>{this.getInfo(item.id)}}>
                                                            {/* <div className='itime'>
                                                                <h2>{item.create_time_text.day}</h2>
                                                                <p>{item.create_time_text.month} {item.create_time_text.year}</p>
                                                            </div> */}
                                                            <div className='imgBox' style={{backgroundImage:"url('"+item.thumb_text+"')"}}></div>
                                                            <div className="iname">
                                                                <div className='itext'>
                                                                    <h2>{item.title}</h2>
                                                                    <span>{item.create_time}</span>
                                                                </div>
                                                                <p>{item.content}</p>
                                                            </div>
                                                        </div>
                                            })
                                        }
                                    </div>
                                    <div className='r_page'>
                                        <Pagination showSizeChanger={false} pageSize={10}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                                    </div>
                                </div>
                                <div className="mright" hidden={!this.state.show}>
                                    <div className="info">
                                        <div className="itop">
                                            <h1>{this.state.data.title}</h1>
                                            <div className="time">
                                                <h2>发布时间：{this.state.data.create_times_text}</h2>
                                                <p>浏览次数：{this.state.data.num}</p>
                                            </div>
                                            <a className="down" target="_blank" without rel="noreferrer" hidden={!this.state.data.file_text} href={this.state.data.file_text} name="111" download="附件">
                                                <img alt="" src="assets/imgs/xiazai.png"/>
                                                <p>附件下载</p>
                                            </a>
                                        </div>
                                        <div className="cont" dangerouslySetInnerHTML={{
                                            __html: this.state.data.content
                                        }}></div>
                                        <div className="next">
                                            <h2 onClick={()=>{this.gotoNext(this.state.data.up.id)}} className={this.state.data.up?"nh":""}>上一篇：{this.state.data.up?this.state.data.up.title:"没有了"}</h2>
                                            <h2 onClick={()=>{this.gotoNext(this.state.data.down.id)}} className={this.state.data.down?"nh":""}>下一篇：{this.state.data.down?this.state.data.down.title:"没有了"}</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
